<template>
  <div class="markdown-editor-box">
    <link rel="stylesheet" href="/static/editor.md/css/editormd.min.css">
    <link rel="stylesheet" href="/static/editor.md/css/editormd.preview.css">
    <button @click="htmlInfo()">html信息</button>
    <button @click="textInfo()">文本信息</button>
    <div :id="editorId"></div>
    <div style="background: #8f9d6a">内容：{{content}}</div>

    <div id="view2">

    </div>
  </div>
</template>
<script>
import scriptjs from 'scriptjs' // 动态引入js文件
import { defaultConfig } from '../assets/editorz/index'

export default {
  props: {
  },
  data: function () {
    return {
      editorId: "markdown-editor",
      content: null,
      editor: null,
      timer: null,
      doc: {},
      jsLoadOver: false
    }
  },
  methods: {
    htmlInfo () {
      this.content = this.editor.getHTML()
    },
    textInfo () {
      this.content = this.editor.getMarkdown()
      const zhanshi = this.editor.getMarkdown()

      window.editormd.markdownToHTML("view2", {
        markdown: zhanshi,//+ "\r\n" + $("#append-test").text(),
        //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
        htmlDecode: "style,script,iframe",  // you can filter tags decode
        //toc             : false,

        path: 'static/editor.md/lib/',
        tocm: true,    // Using [TOCM]
        //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
        //gfm             : false,
        //tocDropdown     : true,
        // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
        emoji: true,
        taskList: true,
        tex: true,  // 默认不解析
        flowChart: true,  // 默认不解析
        sequenceDiagram: true,  // 默认不解析
      });
    },
    fetchScript: function (url) {
      return new Promise((resolve) => {
        scriptjs(url, () => {
          resolve()
        })
      })
    },
    getConfig: function () {
      return { ...defaultConfig, ...this.config }
    },
    getEditor: function () {
      return this.editor
    },
    getDoc: function () {
      return this.doc
    },
    watch: function () {
      return this.editor.watch()
    },
    unwatch: function () {
      return this.editor.unwatch()
    },
    previewing: function () {
      return this.editor.previewing()
    },
    getHTML: function () {
      return this.editor.getHTML()
    },
    getMarkdown: function () {
      return this.editor.getMarkdown()
    },
    setMarkdown: function (markdown) {
      return this.editor.setMarkdown(markdown)
    },
    initEditor: function (markdown) {
      let vm = this
      let config = vm.getConfig()
      if (markdown) {
        config.markdown = markdown
      }
      (async () => {
        await vm.fetchScript('/static/editor.md/jquery.min.js');
        await vm.fetchScript('/static/editor.md/editormd.min.js');
        vm.jsLoadOver = true
        vm.editor = window.editormd(vm.editorId, config)
      })()
    }
  },
  mounted: function () {
    this.initEditor("") 
  },
  destroyed: function () {
    let vm = this
    if (vm.timer != null) {
      window.clearInterval(vm.timer)
      vm.timer = null
    }
  }
}
</script>
<style scoped>
</style>
